<template>
	<div class="container">
		<div class="backcover">
            <van-tag type="warning">连载中</van-tag>
			<img src="https://via.placeholder.com/375x240" mode="cover" />
		</div>
		<div class="book-content">
			<div class="book-cover">
				<img src="https://via.placeholder.com/240x320" mode="cover" />
			</div>
			<div class="book-info">
				<div class="book-title">無法自拔的口紅膠</div>
				<div class="book-author">
					<span>
						<i>作者：</i>劉智愛 & 林型
					</span>
					<span>
						<i>类型：</i>都市
					</span>
				</div>
				<div class="book-view">
					<span>
						<van-icon name="good-job" />3230
					</span>
					<span>
						<van-icon name="like" />3230
					</span>
					<span>
						<van-icon name="fire" />3230
					</span>
				</div>
			</div>
		</div>
		<div class="index-block">
			<div class="block-header">
				<div class="block-title">剧情简介</div>
			</div>
			<div class="book-desc">
				<p>「只要付一點小錢就能~嗯哼♥」那個網路上非常火紅的口紅膠女，竟然就住在我樓上?!</p>
			</div>
		</div>
		<div class="book-tag">
			<van-tag v-for="i in 12" :key="i" color="white" plain>标签</van-tag>
		</div>
		<div class="index-block mb-2">
			<div class="block-header">
				<div class="block-title">目录</div>
				<div class="block-aufix">共35话</div>
			</div>
			<div class="swiper-container scroll-list">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="i in 5" :key="i">
						<div class="list-item catalog-list pay">
							<div class="item-thumb">
								<img src="https://via.placeholder.com/240x320" />
							</div>
							<div class="item-title center">第{{ i++ }}话</div>
						</div>
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="index-block">
			<div class="block-header">
				<div class="block-title">猜你喜欢</div>
			</div>
			<div class="block-content">
				<van-row :gutter="16">
					<van-col :span="8" v-for="i in 6" :key="i">
						<div class="list-item">
							<div class="item-thumb">
								<img src="https://via.placeholder.com/240x320" />
							</div>
							<div class="item-title">123</div>
							<div class="item-rate">
								<van-rate v-model="value" void-icon="star" size="12" />
								<span>{{ value }}</span>
							</div>
						</div>
					</van-col>
				</van-row>
			</div>
		</div>
		<van-goods-action>
			<van-goods-action-icon icon="good-job" text="点赞" />
			<van-goods-action-icon icon="like" text="喜欢" />
			<van-goods-action-button icon="label" type="warning" text="加入书架" />
			<van-goods-action-button icon="play-circle" color="linear-gradient(to right, #ed2f85, #b81898)" text="开始阅读" />
		</van-goods-action>
	</div>
</template>

<script>
import Swiper from "swiper";

export default {
	data() {
		return {
            value: '4.0'
        };
	},
	mounted() {
		new Swiper(".scroll-list", {
			slidesOffsetBefore: 24,
			slidesOffsetAfter: 24,
			slidesPerView: 4,
			spaceBetween: 12
		});
	}
};
</script>